<script setup lang="ts">
import NavigationBarStricky from "@/views/Common/NavigationBarSticky.vue";
import PageHeader from "@/views/Common/PageHeader.vue";
import NavigationBar from "@/views/Common/NavigationBar.vue";
import {computed, onMounted, ref} from 'vue'
import router from '@/router/index'
import {putQuestionAPI} from '@/apis/expert'
import {useUserStore} from '@/stores/user'
import {ElMessage} from "element-plus";
import {getAllQuesAPI} from '@/apis/expert'
import { Search } from "@element-plus/icons-vue";


const userStore=useUserStore()

onMounted(()=>{
getAllQuestion()
})

/* 分页与搜索 */
const pageNumber=ref(1)
const pageSize=ref(9)
const total=ref(0)
const searchKeyword = ref('')

const questionList=ref([])

async function getAllQuestion() {
  const res=await getAllQuesAPI()
  questionList.value=res.data.records
  total.value=questionList.value.length
}


const questionListFilter = computed(()=>{
  // 关键词过滤（按问题与答案模糊匹配）
  const kw = searchKeyword.value.trim().toLowerCase()
  const filtered = kw
      ? questionList.value.filter(it => {
          const q = (it.question || '').toLowerCase()
          const a = (it.answer || '').toLowerCase()
          return q.includes(kw) || a.includes(kw)
        })
      : questionList.value
  total.value = filtered.length
  const start=(pageNumber.value-1)*pageSize.value
  const end=Math.min(pageNumber.value*pageSize.value, total.value)
  return filtered.slice(start,end)
})

const text=ref()
async function releaseQuestion() {
  if(!userStore.isLogin){
    ElMessage({
      type:'error',
      message:'请先登录'
    })
    return
  }

  if(text.value.length===0){
    ElMessage({
      type:'error',
      message:'提问内容不能为空！'
    })
    return
  }
  const question={
    uid:useUserStore().userInfo.uid,
    userName:useUserStore().userInfo.userName,
    question:text.value,
    status:0
  }
  await putQuestionAPI(question).then(res=>{
    ElMessage({
      type:res.code===200?'success':'error',
      message:res.code===200?'发布成功':'发布失败'
    })
    if(res.code===200){
      text.value=''
      getAllQuestion()
    }
    console.log(res)
  })
}

</script>

<template>

  <div class="header">
    <NavigationBarStricky />
    <PageHeader></PageHeader>
    <navigation-bar></navigation-bar>
  </div>

  <div class="question-page">
      <!-- 顶部搜索条 -->
      <div class="top-bar card">
        <div class="title">专家问答</div>
        <div class="search-box">
          <el-input
            v-model="searchKeyword"
            class="kw-input"
            :prefix-icon="Search"
            clearable
            placeholder="搜索问题或答案关键词，如：苹果种植、病虫害">
          </el-input>
        </div>
      </div>

      <div class="question-list">
        <div class="ques-card card" v-for="item in questionListFilter" :key="item.qid" @click="router.push(`/question/${item.qid}`)">
          <div class="q-line">
            <el-badge value="问" color="#14c131"></el-badge>
            <span class="qTitle">{{item.question}}</span>
          </div>

          <div class="a-line" v-if="item.answer!==null">
            <el-badge value="答" color="#ff862c"></el-badge>
            <span class="aText">{{item.answer}}</span>
          </div>

          <div class="meta">
            <span>全部 {{item.totalAnswer}} 个回答</span>
            <span class="adopt">采纳数：{{item.adoptNumbers}}</span>
          </div>
        </div>
      </div>

      <div class="pager">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          v-model:current-page="pageNumber"
          :total="total"/>
      </div>

      <div class="release card">
        <div class="rel-header">向专家提问</div>
        <el-input type="textarea" rows="8" v-model="text" placeholder="请输入您的问题，如：苹果怎么种？"></el-input>
        <div class="rel-footer">
          <el-button type="primary" @click="releaseQuestion">发表</el-button>
        </div>
      </div>
    </div>



</template>

<style scoped lang="less">

.question-page{
  min-height: 100vh;
  background-color: #f3f6f8;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 40px;
}

.card{
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.top-bar{
  width: 1160px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title{
    font-size: 22px;
    font-weight: 600;
    color: #333;
  }
  .search-box{
    width: 420px;
    .kw-input{
      width: 100%;
    }
  }
}

.question-list{
  width: 1160px;
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.ques-card{
  width: calc((1160px - 16px*2)/3);
  min-height: 180px;
  padding: 18px 20px;
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;

  .q-line{
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
  }
  .qTitle{
    position: relative;
  }

  .a-line{
    margin-top: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;

    .aText{
      color: #555;
      line-height: 1.7;
    }
  }

  .meta{
    margin-top: 10px;
    display: flex;
    gap: 24px;
    color: #777;

    .adopt{
      color: #c45656;
      font-weight: 600;
    }
  }
}

.ques-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);

  .qTitle{
    color: #39bf3e;
  }
}

.pager{
  width: 1160px;
  display: flex;
  justify-content: center;
  margin: 16px 0 8px;
}

.release{
  margin-top: 16px;
  width: 1160px;
  padding: 24px;

  .rel-header{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
  }
  .rel-footer{
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
  }
}

</style>